<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>
    <input type="button"  value="自由画笔" onclick="drawPen()"/>
    <div>
        选择画笔颜色： <input id="color" class="color" style="width: 60px;" width="10px" value="66ff00" onchange="changePenColor()">
    </div>
    <div>
        选择画笔宽度：
        <select id="penWidth" onchange="changePenWidth()">
            <option>2</option>
            <option>4</option>
            <option>6</option>
            <option>8</option>
        </select>
    </div>
    <canvas id="can" width="800" height="600" style="border:1px solid #999;" >您的浏览器不支持canvas画图功能，推荐使用Google浏览器!</canvas>
</div>
<script type="text/javascript"  src="../../js/jquery/jquery-3.2.1.js"></script>
<script type="text/javascript"  src="../../js/jcanvas-20.1.3/dist/jcanvas.js"></script>
<script type="text/javascript"  src="../../js/ext/jcanvas-ext.js"></script>
<script type="text/javascript"  src="../../js/jscolor/jscolor.js"></script>
<script type="text/javascript">
    function drawPen(){
        var color= "#"+$("#color").val();
        var width=$("#penWidth option:selected").text();
        CanvasExt.drawPen("can",color,width);
    }
</script>
</body>
</html>